<template>
    <div>
     	<!--绩效评价-->
        <ul class="mui-table-view">
			<li @click="toggle" class="mui-table-view-cell">
				<i slot="icon" class="alicon icon-shaixuan" style="font-size: 20px;position:relative;top: 2px;"></i>
				<span  >筛选：{{departmentSelectLabel}} | {{subjectSelectLabel}} | </span>
				
				<span v-if="teacherSelectLabel.length <= 1">{{teacherSelectLabel[0]}}</span>
				<span v-else>{{teacherSelectLabel[0]}}等</span>
				<i slot="icon" class="alicon icon-arrow" style="font-size: 16px;position:absolute;top: 11px;right: 16px;"></i>
			</li>
		</ul>
        <mt-popup v-model="popupVisible" :modal="false" class="mint-popup" position="top">
        	<div :style="pophightclass" >
        		<div style="padding: 14px 25px 60px 25px;">
        			<div style="color: #666666;font-size: 12pt;">部门</div>
    				<div @click="choosedepartment" v-for="item in departmentList" style="width: 25%;text-align: center;display: inline-block;">
        				<div v-bind:class="[departmentSelectValue == item.value?activeclass:'']" :label="item.label" :value="item.value" style="margin: 0 auto;font-size: 12pt;width: 75px;height: 36px;margin-top:7px;background-color: #F4F4F4;border:1px solid #e9eaec;line-height: 36px;border-radius: 5px;text-align: center;">
	 						{{item.label}}
	 					</div>
        			</div>
        			
        			<hr style="margin:10px 0px 10px 0px;width: 100%;background-color: rgba(240,240,240,1);border: none;height: 1px;" />
        			<div style="color: #666666;font-size: 12pt;">科目</div>
    				<div @click="choosesubject" v-for="item in subjectList" style="width: 25%;text-align: center;display: inline-block;">
        				<div v-bind:class="[subjectSelectValue == item.value?activeclass:'']" :label="item.label" :value="item.value" style="margin: 0 auto;font-size: 12pt;width: 75px;height: 36px;margin-top:7px;background-color: #F4F4F4;border:1px solid #e9eaec;line-height: 36px;border-radius: 5px;text-align: center;">
	 						{{item.label}}
	 					</div>
        			</div>
        			
        			<hr style="margin:10px 0px 10px 0px;width: 100%;background-color: rgba(240,240,240,1);border: none;height: 1px;" />
        			<div style="color: #666666;font-size: 12pt;">教师<span style="margin-right:20px;font-size: 12px;color: #666666;">&nbsp;&nbsp;(无数据教师不显示,最多选择10个)</span></div>
    				<div @click="chooseteacher" v-for="item in teacherList" style="width: 25%;text-align: center;display: inline-block;">
        				<div v-bind:class="[teacherSelectValue.indexOf(item.value)>-1?activeclass:'']" :label="item.label" :value="item.value" style="margin: 0 auto;font-size: 12pt;width: 75px;height: 36px;margin-top:7px;background-color: #F4F4F4;border:1px solid #e9eaec;line-height: 36px;border-radius: 5px;text-align: center;">
	 						{{item.label}}
	 					</div>
        			</div>
        		</div>
        		
        		<div style="position: fixed;bottom: 45px;width: 100%;">
        			<mt-button @click="canelButton"  style="float: left;height:49px;border-radius: 0px;width:50%;background-color: white;color: #999999;">取消</mt-button>
					<mt-button @click="getDataButton" style="float: left;height:49px;border-radius: 0px;width:50%;background-color: #517EDB;color: white;">确定</mt-button>
        		</div>
        	</div>
        </mt-popup>
        
        <div style="width: 100%;height: 7px;background-color: #f5f5f5;"></div>
        <div style="background-color: white;padding: 20px 0px 20px 0px;">
        	<div>
        		<span style="margin-left: 20px;">绩效达标率:</span>
        	</div>
        	<div style="margin-top: 5px;">
    			<span style="float: left;margin-left:20px;font-size: 15px;">{{subjectSelectLabel}}:</span>
    		</div>
        	<div style="clear:both;margin:0 auto;width: 95%;background-color: white;margin-top: 10px;">
        	<!--<div style="clear:both;margin:0 auto;width: 95%;background-color: white;margin-top: 10px;-moz-box-shadow:0px 0px 14px #E8E8E8; -webkit-box-shadow:0px 0px 14px #E8E8E8; box-shadow:0px 0px 14px #E8E8E8;">-->
				<div id="myChart" ref="bar" :style="{width: '98%', height: '200px',margin:'0 auto'}"></div>
			</div>
        </div>
        
        
        <div style="width: 100%;height: 7px;background-color: #f5f5f5;"></div>
        <div style="background-color: white;padding: 20px 0px 10px 0px;">
        	<div>
        		<span style="margin-left: 20px;font-weight: 500;">绩效趋势图:</span>
        	</div>
        	<div style="margin-top: 5px;">
    			<span style="float: left;margin-left:20px;font-size: 15px;">{{subjectSelectLabel}}:</span>
    			<span style="float: right;margin-right:20px;font-size: 12px;color: #666666;">取近10次分数值，次数值越大越临近</span>
    		</div>
    		<!--<div v-show="linedata.xAxis.data != ''">-->
    			<div style="clear:both;margin:0 auto;width: 95%;background-color: white;margin-top: 10px;">
	        	<!--<div style="clear:both;margin:0 auto;width: 95%;background-color: white;margin-top: 10px;-moz-box-shadow:0px 0px 14px #E8E8E8; -webkit-box-shadow:0px 0px 14px #E8E8E8; box-shadow:0px 0px 14px #E8E8E8;">-->
					<div id="myChart" ref="line" :style="{width: '98%', height: '200px',margin:'0 auto'}"></div>
				</div>
    		<!--</div>-->
    		<!--<div v-show="linedata.xAxis.data == ''">
    			<div style="clear:both;margin:0 auto;width: 95%;background-color: white;margin-top: 10px;">
	        		5555
				</div>
    		</div>-->
        	
        </div>
        
        <div style="width: 100%;height: 7px;background-color: #f5f5f5;"></div>
        <div style="background-color: white;width: 100&;padding-top: 20px;">
        	<div>
        		<span style="margin-left: 20px;">绩效列表:</span>
        	</div>
       		<div v-for="item in performanceList" @click="getPerformanceResult(item.performanceId,item.teacherId)" style="background-color: white;">
       			
       			<div style="width: 100%;margin-top: 15px;">
       				<div style="width:79%;display: inline-block;padding-left: 20px;">{{item.performanceName}}&nbsp;&nbsp;<span style="font-size: 13px;color: #666666;">{{item.time}}</span></div>
       				<div v-if="item.isQualified == '达标'" style="width:19%;color: #517EDB;display: inline-block;padding-right: 20px;text-align: center;">{{item.teacherResults}}</div>
       				<div v-else style="width:19%;color: red;display: inline-block;padding-right: 20px;text-align: center;">{{item.teacherResults}}</div>
       			</div>
       			<div style="width: 100%;margin-top: 6px;">
       				<div style="width:79%;display: inline-block;padding-left: 20px;color: #666666;font-size: 13px;"><i style="font-size: 17px" class="alicon icon-wode"></i>{{item.teacherName}}&nbsp;&nbsp;&nbsp;&nbsp;达标分：{{item.subjectResults}}</div>
       				<div v-if="item.isQualified == '达标'" style="width:19%;color: #517EDB;display: inline-block;text-align: center;padding-right: 20px;font-size: 13px;">达标</div>
       				<div v-else style="width:19%;color: red;display: inline-block;text-align: center;padding-right: 20px;font-size: 13px;">未达标</div>
       			</div>
       			<div style="margin-top: 15px;width: 100%;height: 1px;background-color: #f5f5f5;"></div>
       		</div>
       		<div @click="getMorePerformanceList" style="text-align: center;padding: 10px;">
       			<span style="color: #666666;font-size: 13px;height: 30px;margin-top: 10px;width: 100%;">{{loadMore}}<i v-if="loadMore == '加载更多'" style="font-size: 12px" class="alicon icon-xiala"></i></span>
       		</div>
        </div>
        
        
        <mt-popup style="height:100%;overflow: scroll;margin-top: 0px;" v-model="PerformancePopupVisible" :modal="false" class="mint-popup" position="top">
        	<div>
        		<div v-for="item in performanceReault" style="text-align: center;padding: 5px; font-size: 13px;line-height: 28px;width: 96%;margin: 0 auto;display: block;" >
        			<div style="margin-top: 20px;">
        				{{item.performanceName}}
        			</div>
        			<div style="display: inline-block; width: 100%">
        				<div style="display:inline-block;text-align: left;width: 50%;float: left;">{{item.teacherName}}</div>
        				<div style="display:inline-block;text-align: right;width: 50%;float: right;">{{item.time}}</div>
        			</div>
        			<div style=" display: inline-block; width: 100%;text-align：left;"><span style="float: left;font-weight: bold;">|绩效得分</span> <span style="color: #666666;font-size: 12px;">说明:绩效得分为总分100分制转8分制</span></div>
        			<table style="display: block;width: 100%;margin: 0 auto;float: left;">
  						<tr style="width: 100%;display: inline-block;">
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">绩效得分(8)</td>
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">学科平均得分</td>
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">是否达标</td>
  						</tr>
  						<tr style="width: 100%;display: inline-block;">
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">{{item.teacherResults}}分</td>
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">{{item.subjectResults}}分</td>
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;font-weight: bold;">{{item.isQualified}}</td>
  						</tr>
					</table>
					<div style=" margin-top: 20px;display: inline-block; width: 100%;text-align：left;"><span style="float: left;font-weight: bold;">|总分</span><span style="color: #666666;font-size: 12px;">说明:比较得分为原始分116分制转80分制</span></div>
        			<table style="display: block;width: 100%;margin: 0 auto;float: left;">
  						<tr style="width: 100%;display: inline-block;float: left;">
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">总分(100)</td>
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">比较得分(80)</td>
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">班级得分(20)</td>
  						</tr>
  						<tr style="width: 100%;display: inline-block;float: left;">
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">{{item.sumResults}}分</td>
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">{{item.changeSumResults}}分</td>
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">{{item.classesResults}}分</td>
  						</tr>
					</table>
					<div style="margin-top: 20px;display: inline-block; width: 100%;text-align：left;"><span style="float: left;font-weight: bold;">|原始分</span></div>
        			<table style="display: block;width: 100%;margin: 0 auto;float: left;">
  						<tr style="width: 100%;display: inline-block;float: left;">
    						<td style="border: 1px solid black;width: 25%;display: inline-block;float: left;text-align: center;">原始得分(116)</td>
    						<td style="border: 1px solid black;width: 25%;display: inline-block;float: left;text-align: center;">三率得分(30)</td>
    						<td style="border: 1px solid black;width: 25%;display: inline-block;float: left;text-align: center;">横向得分(66)</td>
    						<td style="border: 1px solid black;width: 25%;display: inline-block;float: left;text-align: center;">纵向得分(20)</td>
  						</tr>
  						<tr style="width: 100%;display: inline-block;float: left;">
    						<td style="border: 1px solid black;width: 25%;display: inline-block;float: left;text-align: center;">{{item.originalSumResults}}分</td>
    						<td style="border: 1px solid black;width: 25%;display: inline-block;float: left;text-align: center;">{{item.threeRate}}分</td>
    						<td style="border: 1px solid black;width: 25%;display: inline-block;float: left;text-align: center;">{{item.transverseResult}}分</td>
    						<td style="border: 1px solid black;width: 25%;display: inline-block;float: left;text-align: center;">{{item.verticalResults}}分</td>
  						</tr>
					</table>
					<div style="margin-top: 20px;display: inline-block; width: 100%;text-align：left;"><span style="float: left;font-weight: bold;">|三率得分</span></div>
        			<table style="display: block;width: 100%;margin: 0 auto;float: left;">
  						<tr style="width: 100%;display: inline-block;float: left;">
    						<td style="border: 1px solid black;width: 25%;display: inline-block;float: left;text-align: center;">三率得分(30)</td>
    						<td style="border: 1px solid black;width: 25%;display: inline-block;float: left;text-align: center;">平均分(10)</td>
    						<td style="border: 1px solid black;width: 25%;display: inline-block;float: left;text-align: center;">优秀率(10)</td>
    						<td style="border: 1px solid black;width: 25%;display: inline-block;float: left;text-align: center;">及格率(10)</td>
  						</tr>
  						<tr style="width: 100%;display: inline-block;float: left;">
    						<td style="border: 1px solid black;width: 25%;display: inline-block;float: left;text-align: center;">{{item.threeRate}}分</td>
    						<td style="border: 1px solid black;width: 25%;display: inline-block;float: left;text-align: center;">{{item.averageResults}}分</td>
    						<td style="border: 1px solid black;width: 25%;display: inline-block;float: left;text-align: center;">{{item.excellentRateResults}}分</td>
    						<td style="border: 1px solid black;width: 25%;display: inline-block;float: left;text-align: center;">{{item.passRateResults}}分</td>
  						</tr>
					</table>
        			<div style="margin-top: 20px;display: inline-block;width: 100%;text-align：left;"><span style="float: left;font-weight: bold;">|横向得分</span></div>
        			<table style="display: block;width: 100%;margin: 0 auto;float: left;">
  						<tr style="width: 100%;display: inline-block;float: left;">
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">横向得分(66)</td>
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">巩固率(43)</td>
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">提升率(23)</td>
  						</tr>
  						<tr style="width: 100%;display: inline-block;float: left;">
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">{{item.transverseResult}}分</td>
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">{{item.backResults}}分</td>
    						<td style="border: 1px solid black;width: 33.3%;display: inline-block;float: left;text-align: center;">{{item.forewardResults}}分</td>
  						</tr>
					</table>
        			
        			
        			
        			
        			<!--<div style="margin-top: 20px;text-align: left;">
        				■教师得分(8)：{{item.teacherResults}}分
        			</div>
        			<div style="margin-top: 10px;text-align: left;">
        				学科平均分：{{item.subjectResults}}
        			</div>
        			<div style="margin-top: 5px;text-align: left;padding-bottom: 30px;">
        				是否达标：{{item.isQualified}}
        			</div>-->
        			<!--<div style="margin-top: 20px;text-align: left;">
        				■比较得分(80)：{{item.changeSumResults}}分  <span style="color: #666666;font-size: 12px;">说明：原始分转80分制</span>
        			</div>-->
        			<!--<div style="padding-left:20px;padding-right: 20px;">
        				<div style="margin-top: 20px;text-align: left;">
	        				原始分(116)：{{item.originalSumResults}}分
	        			</div>
	        			<div style="margin-top: 20px;text-align: left;">
	        				●三率得分(30)：24分
	        			</div>
	        			<div style="margin-top: 20px;width: 100%;">
	        				<div style="display: inline-block;width: 32%;">
	        					<div>平均分(10)</div>
	        					<div>{{item.averageResults}}分</div>
	        				</div>
	        				<div style="display: inline-block;width: 32%;">
	        					<div>优秀率(10)</div>
	        					<div>{{item.excellentRateResults}}分</div>
	        				</div>
	        				<div style="display: inline-block;width: 32%;">
	        					<div>及格率(10)</div>
	        					<div>{{item.passRateResults}}分</div>
	        				</div>
	        			</div>
	        			<div style="margin-top: 20px;text-align: left;">
	        				●横向比较得分(66)：50分
	        			</div>
	        			<div style="margin-top: 20px;width: 100%;">
	        				<div style="display: inline-block;width: 48%;">
	        					<div>巩固率(43)</div>
	        					<div>{{item.backResults}}分</div>
	        				</div>
	        				<div style="display: inline-block;width: 48%;">
	        					<div>提升率(23)</div>
	        					<div>{{item.forewardResults}}分</div>
	        				</div>
	        			</div>
	        			<div style="margin-top: 20px;text-align: left;">
	        				●纵向比较得分(20)：{{item.verticalResults}}分
	        			</div>
        			</div>-->
        			
        			<!--<div style="margin-top: 20px;text-align: left;">
        				■班级得分(20)：{{item.classesResults}}分
        			</div>
        			<div style="margin-top: 20px;text-align: left;">
        				■总分=比较得分+班级得分(100)：{{item.sumResults}}分
        			</div>-->
        			
        		</div>
        		<div style="width: 100%;padding: 20px;">
        			<mt-button @click="canelPerformancePopupVisible" style="margin-top: 30px; float: left;height:30px;border-radius: 0px;width:100%;background-color: white;color: #999999;">返回</mt-button>
        		</div>
        	</div>
        </mt-popup>
        
        
    </div>
</template>

<script>
	import api from "@/components/js/Apidomain.js"
	import { getsessionstorage } from '@/components/js/Localstorage'
	import { Toast } from 'mint-ui';
    export default {
        data() {
            return {
				popupVisible:false,			//选择框的显示隐藏
				PerformancePopupVisible:false,			//绩效详细成绩显示面板
				departmentSelectValue:"",				//部门选择的值(初高中)
				departmentSelectLabel:"",				//部门选择的名称
				subjectSelectValue:"",					//科目选择的值
				subjectSelectLabel:"",					//科目选择的名称
				teacherSelectValue:[],				//教师选择的值
				teacherSelectLabel:[],					//教师选择的名称
				currentAllPage:"",						//当前绩效列表的总页码
				current:1,								//当前绩效列表的页码
				loadMore:"加载更多",						//加载更多的文字改变
				performanceReault:[],					//详细的绩效成绩
				
				departmentList:[],
				subjectList:[],
				teacherList:[],
				performanceList:[],
				teacherName:"",
				linedata: {
				    title: {
				        text: ''
				    },
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
				    	y: 'bottom', // 'center' | 'bottom' | {number}
//				        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'],
				        textStyle: {
 					        "fontSize": 12
 					    }
				    },
				    grid: {
				    	y:'5%',
				        left: '2%',
				        right: '3%',
				        bottom: '31%',
				        containLabel: true
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: ""
//				        data: ['周一','周二','周三','周四','周五','周六','周日']
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [
//				        {
//				            name:'邮件营销',
//				            type:'line',
//				            data:[120, 132, 101, 134, 90, 230, 210]
//				        },
//				        {
//				            name:'联盟广告',
//				            type:'line',
//				            data:[220, 182, 191, 234, 290, 330, 310]
//				        },
				    ],
				    noDataLoadingOption:{
				        effect:"bubble",
				        text:"暂无数据",
				        effectOption:{
				            effect:{
				                n:0
				            }
				        },
				        textStyle:{
				            fontSize:32,
				            fontWeight:'bold'
				        }
				    }
				},
				bar:{
				    color: ['#3398DB'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				    	y:'5%',
				    	
				        left: '2%',
				        right: '5%',
				        bottom: '6%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data : "",
//				            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				            axisTick: {
				                alignWithLabel: true
				            },
				            axisLabel: {
                                           interval:0,
                                           rotate:-40
                                       }
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            type:'bar',
				            barWidth: '30%',
				            data:"",
//				            data:[10, 52, 200, 334, 390, 330, 220]
							label: {
					            "normal": {
					                "show": true,
					                "textStyle": {
					                    "fontSize": 12
					                },
					                formatter:'{c} %'
					            },
							},
				        }
				    ]
				},
            }
        },
        computed:{
        	pophightclass: function() {
				return {
					overflow: 'scroll',
					height: document.documentElement.clientHeight - 45+ "px",
				}
			},
			activeclass: function() {
				return 'active'
			},
        },
        created(){
        	this.getDepartmentList()
        	this.getSubjectList()
        },
        mounted(){
        	
        },
        methods:{
        	drawLine() {
        		this.$nextTick(function () {
	                let myChart = this.$echarts.init(this.$refs.line,'hengyi')
	                myChart.clear();
	                myChart.setOption(this.linedata);
	                myChart.resize();
	            })
            },
            drawBar() {
            	this.$nextTick(function () {
	                let myChart = this.$echarts.init(this.$refs.bar,'hengyi')
	                myChart.clear();
	                myChart.setOption(this.bar);
	                myChart.resize();
                })
            },
        	toggle:function(){
        		if(this.popupVisible){
        			this.popupVisible = false;
        		}else{
        			this.popupVisible = true;
        		}
        	},
        	//获取学部
        	getDepartmentList:function(){
        		var self = this;
        		let roleId = getsessionstorage('roleid')
            	let url = api.apidomain+'/tqes/web/quaTeacherResults/getDepartment';
            	this.$http.post(url,{"roleId":roleId}).then(function(response) {
					if(response.data.success == true){
//						console.log(response.data.data)
						self.departmentList = response.data.data;
						if(self.departmentList.length >= 1){
							self.departmentSelectValue = self.departmentList[0].value				
							self.departmentSelectLabel = self.departmentList[0].label
						}
//						self.getteacherList()
						
	            }else if(response.data.success == false){
	            		Toast({
								message: response.data.msg,
								position: 'middle',
								duration: 2000
							});
	            	}
	            	
				})
				.catch(function(error) {
					Toast({
								message: '系统发生错误',
								position: 'middle',
								duration: 2000
							});
				});
        	},
        	//获取学科
        	getSubjectList:function(){
        		var self = this;
        		let roleId = getsessionstorage('roleid')
            	let url = api.apidomain+'/tqes/web/quaTeacherResults/getSubject';
            	this.$http.post(url,{"roleId":roleId}).then(function(response) {
					if(response.data.success == true){
//						console.log(response.data.data)
						self.subjectList = response.data.data;
						if(self.subjectList.length >= 1){
							self.subjectSelectValue = self.subjectList[0].value				
							self.subjectSelectLabel = self.subjectList[0].label
						}
//						self.getteacherList()
						
	            }else if(response.data.success == false){
	            		Toast({
								message: response.data.msg,
								position: 'middle',
								duration: 2000
							});
	            	}
	            	
				})
				.catch(function(error) {
					Toast({
								message: '系统发生错误',
								position: 'middle',
								duration: 2000
							});
				});
        	},
        	//更改学部触发函数
        	choosedepartment:function(e){
        		let dom = e.target;
				var domlabel = dom.getAttribute("label");
				var domvalue = dom.getAttribute("value");
				//如果点到空白地方
				if(dom.getAttribute("label") == null){
					return;
				}
				this.departmentSelectValue = domvalue				
				this.departmentSelectLabel = domlabel	
				this.teacherSelectValue = []				
				this.teacherSelectLabel = []	
//				this.getteacherList()
								
        	},
        	//更改学年触发函数
        	choosesubject:function(e){
        		let dom = e.target;
				var domlabel = dom.getAttribute("label");
				var domvalue = dom.getAttribute("value");
				//如果点到空白地方
				if(dom.getAttribute("label") == null){
					return;
				}
				this.subjectSelectValue = domvalue				
				this.subjectSelectLabel = domlabel
				this.teacherSelectValue = []				
				this.teacherSelectLabel = []
//				this.getteacherList()
        	},
        	//获取教师列表
        	getteacherList:function(){
        		var self = this;
        		let roleId = getsessionstorage('roleid')
            	let url = api.apidomain+'/tqes/web/quaTeacherResults/getTeacherList';
            	this.$http.post(url,{"type":this.departmentSelectValue,"subjectId":this.subjectSelectValue,"roleId":roleId}).then(function(response) {
					if(response.data.success == true){
//						console.log(response.data.data)
						self.teacherList = response.data.data;
						if(self.teacherList.length > 0 ){
							self.teacherSelectValue.push(self.teacherList[0].value);
							self.teacherSelectLabel.push(self.teacherList[0].label);
							self.getLineData()
							self.getBarData()
							self.getTeacherPerformanceDetail()
						}
						
		           }else if(response.data.success == false){
		            		Toast({
									message: response.data.msg,
									position: 'middle',
									duration: 2000
								});
		            	}
		            	
					})
					.catch(function(error) {
						Toast({
									message: '系统发生错误',
									position: 'middle',
									duration: 2000
								});
					});
        	},
        	//更改老师触发函数
        	chooseteacher:function(e){
        		let dom = e.target;
				var domlabel = dom.getAttribute("label");
				var domvalue = dom.getAttribute("value");
				//如果点到空白地方
				if(dom.getAttribute("label") == null){
					return;
				}
				
				
				if(dom.getAttribute("class") == "active"){
						for(let i = 0;i<this.teacherSelectValue.length;i++){
							if(this.teacherSelectValue[i] == domvalue){
								this.teacherSelectValue.splice(i,1)
//								console.log(i)
							}
						}
						for(let i = 0;i<this.teacherSelectLabel.length;i++){
							if(this.teacherSelectLabel[i] == domlabel){
								this.teacherSelectLabel.splice(i,1)
//								console.log(i)
							}
						}
					}else{
						if(this.teacherSelectValue.length > 9){
							Toast({
									message: "最多选择10个",
									position: 'middle',
									duration: 2000
								});
							return 
						}
						this.teacherSelectValue.push(domvalue)
						this.teacherSelectLabel.push(domlabel)
					}
        	},
        	//获取折线图数据
        	getLineData:function(){
        		var self = this;
            	let url = api.apidomain+'/tqes/web/quaTeacherResults/getTeacherResultsBySubjectTeacherId';
            	this.$http.post(url,{"type":this.departmentSelectValue,"subjectId":this.subjectSelectValue,"teacherIdList":this.teacherSelectValue}).then(function(response) {
					if(response.data.success == true){
//						console.log(response.data.data.Subject)
						self.linedata.xAxis.data = response.data.data.Subject;
						self.linedata.series = response.data.data.Subject_data;
						self.drawLine()
		           }else if(response.data.success == false){
		            		Toast({
									message: response.data.msg,
									position: 'middle',
									duration: 2000
								});
		            	}
		            	
					})
					.catch(function(error) {
						Toast({
									message: '系统发生错误',
									position: 'middle',
									duration: 2000
								});
					});
        	},
        	//获取柱状图数据
        	getBarData:function(){
        		var self = this;
            	let url = api.apidomain+'/tqes/web/quaTeacherResults/getTeacherPerformanceSuccess';
            	this.$http.post(url,{"type":this.departmentSelectValue,"subjectId":this.subjectSelectValue,"teacherIdList":this.teacherSelectValue}).then(function(response) {
					if(response.data.success == true){
//						console.log(response.data.data)
						self.bar.xAxis[0].data = response.data.data.name;
						self.bar.series[0].data = response.data.data.score; 
						self.drawBar()
		           }else if(response.data.success == false){
		            		Toast({
									message: response.data.msg,
									position: 'middle',
									duration: 2000
								});
		            	}
		            	
					})
					.catch(function(error) {
						Toast({
									message: '系统发生错误',
									position: 'middle',
									duration: 2000
								});
					});
        	},
        	//获取教师绩效列表
        	getTeacherPerformanceDetail:function(){
        		var self = this;
            	let url = api.apidomain+'/tqes/web/quaTeacherResults/getTeacherPerformanceDetail';
            	this.$http.post(url,{"current":this.current,"pageSize":"10","type":this.departmentSelectValue,"subjectId":this.subjectSelectValue,"teacherIdList":this.teacherSelectValue}).then(function(response) {
					if(response.data.success == true){
						console.log(response.data.data.items)
						if(response.data.data.items){
							for(let i = 0;i<response.data.data.items.length;i++){
								self.performanceList.push(response.data.data.items[i])
							}
						}
						if(response.data.data.items){
							if(response.data.data.items.length == 0){
								console.log("000")
								self.loadMore = "已加载完全部数据";
								Toast({
										message: "无更多数据",
										position: 'middle',
										duration: 2000
									});
							}
						}
						
						
		           }else if(response.data.success == false){
		            		Toast({
									message: response.data.msg,
									position: 'middle',
									duration: 2000
								});
		            	}
		            	
					})
					.catch(function(error) {
						Toast({
									message: '系统发生错误',
									position: 'middle',
									duration: 2000
								});
					});
        	},
        	getPerformanceResult:function(performanceId,teacherId){
        		console.log(performanceId)
        		console.log(teacherId)
        		
        		this.PerformancePopupVisible = true;
        		
        		var self = this;
            	let url = api.apidomain+'/tqes/web/quaTeacherResults/selectTeacherPerformanceDetail';
            	this.$http.post(url,{"performanceId":performanceId,"teacherId":teacherId}).then(function(response) {
					if(response.data.success == true){
						console.log(response.data.data)
						self.performanceReault = response.data.data
		           }else if(response.data.success == false){
		            		Toast({
									message: response.data.msg,
									position: 'middle',
									duration: 2000
								});
		            }
					})
					.catch(function(error) {
						Toast({
									message: '系统发生错误',
									position: 'middle',
									duration: 2000
								});
					});
        	},
        	getMorePerformanceList:function(){
        		this.current++;
        		this.getTeacherPerformanceDetail();
        	},
        	getDataButton:function(){
        		this.loadMore = "加载更多"
        		this.performanceList = []
        		this.getLineData()
        		this.getBarData()
        		this.getTeacherPerformanceDetail()
        		this.popupVisible = false;
        	},
        	canelButton:function(){
        		this.popupVisible = false;
        	},
        	canelPerformancePopupVisible:function(){
        		this.PerformancePopupVisible = false;
        	}
        },
        watch:{
        	departmentSelectValue:function(){
        		if(this.departmentSelectValue != "" && this.subjectSelectValue != ""){
        			this.getteacherList()
        		}
        	},
        	subjectSelectValue:function(){
        		if(this.departmentSelectValue != "" && this.subjectSelectValue != ""){
        			this.getteacherList()
        		}
        	}
        }
    }
</script>

<style scoped>
	.active{
		background-color: #EDF2FB !important;
		color: #517EDB;
		background-image: url(../../../static/image/performanceAppraisal/select.png);
	}
	.mint-popup {
		margin-top:45px;
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
    .mui-content{
    	background-color: white;
    }
    .mint-toast{
    	z-index: 10000 ;
    }
    
.content {
	background-color: lightblue;
	width: 900px;
	padding: 20px;
	text-align: center;
        font-size: 0px;
}
    
</style>